<template>
  <div>
    <button @click="handleClick">显示/消失</button><br/>
    <transition name="hello" appear>
      <div v-show="isShow" class="box">VUE动画效果</div>
    </transition>
    <transition-group name="hello" appear>
      <div v-show="isShow" class="box" key="1">VUE动画效果</div>
      <div v-show="isShow" class="box" key="2">VUE动画效果</div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "Test2-component",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    handleClick(){
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped>
.box{
  height: 100px;
  background-color: orange;
  font-size: 40px;
  font-weight: bold;
}

.hello-enter-active,.hello-leave-active{
  transition: 1s;
}
.hello-enter,.hello-leave-to{
  transform: translateX(-100%);
}
.hello-leave,.hello-enter-to{
  transform: translateX(0);
}

</style>